<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="./js/area.js"></script>
    <title>学生管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: #F5F5F5;
        }

        .box {
            width: 350px;
            height: 800px;
            background-color: #DACAAD;
            float: left;
            /* z-index: 99; */
        }

        .xlcaidan {
            width: 350px;
            margin: 0;
        }

        .xlcaidan h4 {
            background-color: #433425;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-weight: 700;
        }

        .xlcaidan p {
            height: 34px;
            line-height: 34px;
            padding-left: 20px;
            font-size: 13px;
            font-weight: 700;
            background-color: #564F43;
            color: #fff;
            cursor: pointer;
        }

        .xlcaidan ul>li {
            margin: 0;
            overflow: hidden;
            height: 0;
            transition: all .7s ease 0s;
            line-height: 34px;
            background-color: blue;
            font-size: 12px;
            padding-left: 30px;
            background-color: #DACAAD;
        }

        .xlcaidan ul li:hover {
            background-color: #fff;
        }

        .nav {
            height: 50px;
            background-color: #E8E8E8;
            line-height: 50px;
            text-align: center;
            font-weight: 700;
            font-size: 25px;
        }

        .box2 {
            height: 400px;
            background-color: red;
            padding-left: 400px;
            /* position: relative; */
        }

        .box2 .nav1 {
            height: 50px;
            width: 400px;
            background-color: white;
            position: relative;
            top: 10px;
            line-height: 40px;
            font-weight: 700;
            font-size: 20px;
        }

        .banji {
            height: 50px;
            width: 400px;
            background-color: white;
            line-height: 50px;
            position: relative;
            top: 20px;
        }

        .banji ul {
            display: flex;
            justify-content: space-around;
        }

        .main1 {
            height: 200px;
            width: 800px;
            background-color: #ccc;
            margin-top: 30px;
            overflow: auto
        }

        .main1 ol li {
            height: 40px;
            line-height: 40px;
            margin-left: 5px;
        }

        .box3 {
            height: 400px;
            background-color: blue;
            padding-left: 400px;

        }

        .main2 {
            height: 200px;
            width: 800px;
            /* margin-left: 400px; */
            background-color: #ccc;
            margin-top: 20px;
            overflow: auto
        }

        .main2 ol li {
            height: 40px;
            line-height: 40px;
            margin-left: 5px;
        }

        .container {
            position: absolute;
            top: 130px;
            right: -50px;
        }
    </style>
</head>

<body>
    <div class="nav">学生管理系统</div>
    <div class="box">
        <div class="xlcaidan">
            <h4>菜单栏</h4>
            <p>2021</p>
            <ul>
                <li>&gt;&emsp;会计</li>
                <li>&gt;&emsp;艺术</li>
                <li>&gt;&emsp;计算机</li>
            </ul>
            <p>2020</p>
            <ul>
                <li>&gt;&emsp;会计</li>
                <li>&gt;&emsp;艺术</li>
                <li>&gt;&emsp;计算机</li>
            </ul>
            <p>2019</p>
            <ul>
                <li>&gt;&emsp;会计</li>
                <li>&gt;&emsp;艺术</li>
                <li>&gt;&emsp;计算机</li>
            </ul>
            <p>2018</p>
            <ul>
                <li>&gt;&emsp;会计</li>
                <li>&gt;&emsp;艺术</li>
                <li>&gt;&emsp;计算机</li>
            </ul>
            <p>2017</p>
            <ul>
                <li>&gt;&emsp;会计</li>
                <li>&gt;&emsp;艺术</li>
                <li>&gt;&emsp;计算机</li>
            </ul>
        </div>
    </div>
    <div class="box2">
        <div class="nav1">
        </div>
        <div class="banji">
            <ul>
                <li>全部</li>
                <li>一班</li>
                <li>二班</li>
            </ul>
        </div>
        <div class="main1">
            <ol>
            </ol>
        </div>
        <div class="container">
            <!-- 按钮：用于打开模态框 -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                新增
            </button>
            <!-- 模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">模态框头部</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <select name="" id="year">
                                <option value="">年份</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                            </select><br>
                            <select name="" id="zhuanye">
                                <option value="">专业</option>
                                <option value="会计">会计</option>
                                <option value="计算机">计算机</option>
                                <option value="艺术">艺术</option>
                            </select><br>
                            <select name="" id="banji">
                                <option value="">班级</option>
                                <option value="一班">一班</option>
                                <option value="二班">二班</option>
                            </select><br>
                            <input type="text" placeholder="姓名" id="usernameList"><br>
                            <input type="text" placeholder="年龄" id="ageList"><br>
                            <form action="" id="sex">
                                <input id="man" type="radio" checked="checked" name="sex1" value="男" />男<input
                                    id="woman" type="radio" name="sex1" value="女" />女<br>
                            </form>
                            <input type="text" placeholder="电话号" id="phoneList"><br>
                            <form action="">
                                <select id="sheng">
                                </select>
                                <select id="shi">
                                </select>
                                <select id="qu">
                                </select>
                            </form>
                        </div>
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="tijiao">提交</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 结束 -->
    </div>
    <div class="box3">
        <form action="">
            <input type="text" placeholder="请输入手机号或者姓名">
            <input type="submit" value="查找">
        </form>
        <div class="main2">
            <ol>
            </ol>
        </div>
    </div>
    <!-- 三级联动 -->
    <script>
        var province = document.querySelector('#sheng'); // 获取省份的下拉菜单
        var city = document.querySelector('#shi'); // 获取市的下拉菜单
        var count = document.querySelector("#qu"); // 获取区的下拉菜单
        var sindex = 0; // 用来记录省的索引
        var cindex = 0; // 用来记录市的索引

        for (let i = 0; i < place.data.length; i++) { // 先渲染省的菜单
            province.innerHTML += `<option>${place.data[i].provname}</option>`
        }
        province.onchange = function () { // 设置省的变化其他的也跟着变化
            //选择省份之后，市区跟着变化
            cityData(); // 声明一个函数 用来装市的变化
            countData();// 声明一个函数 用来装区的变化
        }
        cityData();
        function cityData() { // 打包市的函数
            city.innerHTML = ''; // 每次变化请除上一次的样式
            sindex = province.selectedIndex; // 获取省的索引值
            var cityList = place.data[sindex].city; // 将获取的城市给这个变量
            for (let i = 0; i < cityList.length; i++) { // 渲染出市的菜单
                city.innerHTML += `<option>${cityList[i].cityname}</option>`;
            }

        }
        city.onchange = function () { // 设置市的变化其他的也跟着变化
            //选择城市之后，区跟着变化
            countData();
        }
        countData();
        function countData() { // 打包区的函数
            count.innerHTML = ''; // 每次变化请除上一次的样式
            cindex = city.selectedIndex; // 获取市的索引值
            var countList = place.data[sindex].city[cindex].dist; // 将获取的区给这个变量
            for (let i = 0; i < countList.length; i++) { //渲染出区的菜单
                count.innerHTML += `<option>${countList[i]}</option>`;
            }
            // count.innerHTML='<option value="">-请选择-</option>'
        }
    </script>
    <!-- 三级联动 -->
    <!-- 新增 -->
    <script>
        var tijiao = document.querySelector("#tijiao");
        var mbyear = document.querySelector("#year");
        mbyear.onchange = function () {
            for (i = 0; i < mbyear.length; i++) {//下拉框的长度就是它的选项数.
                if (mbyear[i].selected == true) {
                    var yearList = mbyear[i].value;//获取当前选择项的值.
                }
            }
            var mbzhuanye = document.querySelector("#zhuanye")
            mbzhuanye.onchange = function () {
                for (i = 0; i < mbzhuanye.length; i++) {//下拉框的长度就是它的选项数.
                    if (mbzhuanye[i].selected == true) {
                        var zhuanyeList = mbzhuanye[i].value;//获取当前选择项的值.
                    }
                }
                var mbbanji = document.querySelector("#banji");
                mbbanji.onchange = function () {
                    for (i = 0; i < mbbanji.length; i++) {//下拉框的长度就是它的选项数.
                        if (mbbanji[i].selected == true) {
                            var banjiList = mbbanji[i].value;//获取当前选择项的值.
                        }
                    }
                    console.log(1111);
                    var mbsex = document.querySelector("#sex");
                    var tools = document.getElementsByName("sex1");
                    mbsex.onchange = function () {
                        for (i = 0; i < tools.length; i++) {//下拉框的长度就是它的选项数.
                            if (tools[i].checked) {
                                var sexList = tools[i].value;//获取当前选择项的值.
                            }
                        }
                        
                        var sheng = document.querySelector("#sheng")
                        sheng.onchange = function () {
                            for (i = 0; i < sheng.length; i++) {//下拉框的长度就是它的选项数.
                                if (sheng[i].selected == true) {
                                    var shengList = sheng[i].value;//获取当前选择项的值.
                                }
                            }
                            var shi = document.querySelector("#shi")
                            shi.onchange = function () {
                                for (i = 0; i < shi.length; i++) {//下拉框的长度就是它的选项数.
                                    if (shi[i].selected == true) {
                                        var shiList = shi[i].value;//获取当前选择项的值.
                                    }
                                }
                                var qu = document.querySelector("#qu");
                                qu.onchange = function () {
                                    for (i = 0; i < qu.length; i++) {//下拉框的长度就是它的选项数.
                                        if (qu[i].selected == true) {
                                            var quList = qu[i].value;//获取当前选择项的值.
                                        }
                                    }
                                    var jgList = shengList + shiList + quList;
                                    var usernameList = document.querySelector("#usernameList").value;
                                    var ageList = document.querySelector("#ageList").value;
                                    var phoneList = document.querySelector("#phoneList").value;
                                    
                                    tijiao.onclick = function () {
                                        console.log(1111);
                                        fetch(`/getOne?year=${yearList}&zhuanye=${zhuanyeList}&banji=${banjiList}&username=${usernameList}&age=${ageList}&phone=${phoneList}&sex=${sexList}&jg=${jgList}`, { // 可以获取？后的id page以及他的值，并转换为对象
                                            method: "get", //请求类型 默认是get
                                        }).then(function (res) {
                                            return res.json()
                                        }).then((data) => { // 返回服务器发送的内容
                                            if(data==1){
                                                alert("添加成功")
                                            }
                                        })
                                    }
                                }
                            }
                        }
                    }

                }
            }
        }
    </script>
    <!-- 新增 -->
    <script>
        var ps = document.querySelector('.xlcaidan').querySelectorAll('p'); // 获取标题p
        var qlis = document.querySelector('.xlcaidan').querySelectorAll('li') // 获取 全部的li
        var uls = document.querySelector('.xlcaidan').querySelectorAll('ul');
        var ipt = document.querySelector(".box3").querySelector("input");
        for (let i = 0; i < ps.length; i++) {
            ps[i].onclick = function () { // 给标题加上点击事件
                var num = uls[i].children.length; // 点击第几个标题就获取标题下面ul中的li的个数
                var lis = uls[i].querySelectorAll('li'); // 获取动态ul下面的所有li
                for (let k = 0; k < qlis.length; k++) { // 点击前清除所有li 的高度
                    qlis[k].style.height = '0px';
                }
                for (let j = 0; j < num; j++) { // 点击给获取的li加上高度
                    lis[j].style.height = '34px';
                }
                var year = this.innerText;
                for (let j = 0; j < qlis.length; j++) {
                    qlis[j].onclick = function () {
                        var major = this.innerText.substring(2);
                        // console.log(year);
                        // console.log(major);
                        document.querySelector(".nav1").innerHTML = `${year}/${major}`
                        fetch(`/home?year=${year}&major=${major}`, {
                            method: "get",
                        }).then(function (res) {
                            return res.json()
                        }).then((data) => {
                            console.log(data);
                            var ol1 = document.querySelector(".main1>ol");
                            var banjilis = document.querySelector(".banji").querySelectorAll("li");
                            console.log(banjilis);
                            ol1.innerHTML = "";
                            for (let i = 0; i < data.length; i++) {
                                ol1.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                            }
                            banjilis[0].onclick = function () {
                                ol1.innerHTML = "";
                                for (let i = 0; i < data.length; i++) {
                                    ol1.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                                }
                            }
                            banjilis[1].onclick = function () {
                                ol1.innerHTML = "";
                                for (let i = 0; i < data.length; i++) {
                                    if (data[i].squad == "一班") {
                                        ol1.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                                    }
                                }
                            }
                            banjilis[2].onclick = function () {
                                ol1.innerHTML = "";
                                if (data[i].squad == "二班") {
                                    ol1.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                                }
                            }
                            var ol2 = document.querySelector(".main2>ol");
                            ol2.innerHTML = "";
                            for (let i = 0; i < data.length; i++) {
                                ol2.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                            }
                            document.forms[0].onsubmit = function (e) {
                                e.preventDefault();
                                console.log(ipt.value);
                                var iptmain = ipt.value;
                                for (let i = 0; i < data.length; i++) {
                                    ol2.innerHTML = "";
                                    if (iptmain == data[i].phone || iptmain == data[i].username) {
                                        ol2.innerHTML += `<li>姓名：${data[i].username} 年龄：${data[i].age} 性别：${data[i].sex} 手机号：${data[i].phone} 家庭住址：${data[i].native} 年级：${data[i].period} 专业：${data[i].spercialty}</li>`;
                                    }
                                }
                            }
                        })
                    }
                }
            }
        }
    </script>
</body>

</html>